<template>
  <div class="code">

    <a-list v-if="musicList.length == 0"  :image="simpleImage"/>
    <a-table v-else :columns="columns" :data-source="musicList" size="middle"
             class="ant-table-striped"
             :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
             bordered
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
          <span>
            <CustomerServiceOutlined />
            歌曲名称
          </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <a style="color: #28a763">
            {{ record.name }}
          </a>
        </template>
        <template v-else-if="column.key === 'tags'">
          <span>
            <a-tag
              v-for="tag in record.tags"
              :key="tag"
              :color="
                tag === 'loser'
                  ? 'volcano'
                  : tag.length > 5
                  ? 'geekblue'
                  : 'green'
              "
            >
              {{ tag.toUpperCase() }}
            </a-tag>
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a @click="goDetails(record.url)" target="_blank"
              >Download 一 {{ record.name }}</a
            >
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { CustomerServiceOutlined } from "@ant-design/icons-vue";
import { defineProps, withDefaults } from "vue";
import { Empty } from 'ant-design-vue';
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
interface Prpos {
  musicList: any[];
}

const props = withDefaults(defineProps<Prpos>(), {
  musicList: () => [],
});

const columns = [
  {
    title: "歌名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "歌手",
    dataIndex: "singer",
    key: "age",
  },
  {
    title: "链接",
    dataIndex: "url",
    key: "address",
  },
  {
    title: "Action",
    key: "action",
  },
];
const goDetails = (item: string) => {
  // window.open(`https://www.gequbao.com${item}`);
  window.open(`${item}`);
};
</script>

<style scoped lang="less">
.code {
  width: 100%;

  /deep/ .github-markdown-body {
    margin: 0px;
    padding: 1px;
  }
}
[data-doc-theme='light'] .ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
[data-doc-theme='dark'] .ant-table-striped :deep(.table-striped) td {
  background-color: rgb(29, 29, 29);
}
</style>
